<template>
  <el-tree-select
    v-model="selectedValue"
    :data="treeData"
    :props="defaultProps"
    value-key="id"
    placeholder="请选择分类"
    check-strictly
    @change="handleChange"
  />
</template>

<script setup>
import { ref, watch } from 'vue';
import { listProcategory } from "@/api/procategory/procategory";

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  }
});

const emit = defineEmits(['update:modelValue']);

const selectedValue = ref(props.modelValue);
const treeData = ref([]);

const defaultProps = {
  children: 'children',
  label: 'name'
};

function handleChange(value) {
  emit('update:modelValue', value);
}

function getTreeData() {
  listProcategory().then(response => {
    treeData.value = response.data;
  });
}

watch(() => props.modelValue, (newValue) => {
  selectedValue.value = newValue;
});

getTreeData();
</script>